<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实时库存</title>
    <link rel="stylesheet" href="/layui/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/js/css/clearcss.css" media="all">
    <style>
        .layui-card-header {
            height: 68px;
            line-height: 58px;
        }

        .layui-inline .layui-form-label2 {
            padding-left: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 80px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        #containerListModel {
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header layui-form">
                    <div class="layui-inline">
                        <label class="layui-form-label2" style="width:auto">商品名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="toolName" id="toolName" placeholder="请输入单号"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label2">商品编码：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="model" id="model" class="layui-input" style="width: 199px"
                                   placeholder="请输入来源"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label2">所属设备：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="location" id="location" class="layui-input" style="width: 199px"
                                   placeholder="请输入创建人"/>
                        </div>
                    </div>
                    <div class="layui-inline" style="float: right;">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-active="reload">清空</button>
                        <button class="layui-btn layui-btn-sm" lay-event="AllData" data-type="AllData"
                                lay-active="AllData">搜索
                        </button>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table id="storeList" lay-filter="storeList" lay-data="{id:'storeList'}"></table>
                </div>

                <div type="text/html" id="role_list" style="display:none">
                    <a class="layui-btn layui-btn-sm" lay-event="outExcel">导出</a>
                </div>
                <script type="text/html" id="test-table-operate-barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="details">查看详情</a>
                </script>
            </div>
        </div>
    </div>
</div>
<div id="containerListModel">
    <table id="containerList" lay-filter="containerList" lay-data="{id:'containerList'}"></table>
    <div id="container" style="display:none; margin-top:20px;"></div>
</div>
<script src="/layui/layuiadmin/layui/layui.js"></script>
<!--<script type="text/javascript" src="/js/jquery-1.8.0.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>

<script>
    addId = 0;
    idsAll=[];
    layui.use(['table', 'layer', 'util', 'form'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let util = layui.util;
        let form = layui.form;
        table.render({
            elem: '#storeList'
            ,url: '/storage/getGoodsList' //数据接口
            ,page: true //开启分页
            ,limit:10
            ,limits:[10,30,50,100,2000]
            , toolbar: '#role_list'
            , loading: true
            , height: 'full-168'
            ,cols: [
                [ //表头
                    {field:'No', width:110, title: '序号', type:'numbers', fixed: 'left'}
                    ,{field: 'id', title: 'ID',  sort: true, fixed: 'left', hide: 'hide'}
                    ,{field: 'productName', title: '商品名称',  sort: true, fixed: 'left'}
                    ,{field: 'productCode', title: '商品编码',  sort: true, fixed: 'left'}
                    ,{field: 'inventoryNum', title: '库存数量',  sort: true, fixed: 'left'}
                    ,{field: 'containerNum', title: '容器数量',  sort: true, fixed: 'left'}
                    ,{field: 'overfillNum', title: '预警量',  sort: true, fixed: 'left'}
                    ,{field: 'operate',align:'center', title: '操作',toolbar: '#test-table-operate-barDemo', fixed: 'right',width:220}
                ]
            ]
        });
        table.on('toolbar(storeList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case "outExcel":
                    let toolName = $("#toolName").val();
                    let model = $("#model").val();
                    let location = $("#location").val();
                    let userName = $("#userName").val();
                    let status = $("#status").val();
                    console.log(model)
                    window.open("/log/outGravityCabinetToolExcel?toolName=" + toolName + "&model=" + model + "&location=" + location + "&userName=" + userName + "&status=" + status + "", "_blank");
                    break;
            }
            ;
        });
        table.on('tool(storeList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data2 = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let ids = data2.id;
            if(layEvent === 'details'){
                layer.open({
                    id:'aa',
                    type: 1,
                    title:'查看详情',
                    area: ['60%', '80%'], //自定义文本域宽高
                    content: $('#containerListModel'),
                    btn: ['取消'],//这里content是一个普通的String
                    success: function(layero, index){
                        layerIndex = index;
                        table.render({
                            elem: '#containerList'
                            ,url: '/storage/getContainerAndGoodsList?goodsId='+ids //数据接口
                            ,page: true //开启分页
                            ,limit:10
                            ,limits:[10,30,50,100,500]
                            ,loading:true
                            ,height: 'full'
                            ,cols: [
                                [ //表头
                                    {field:'No', width:80, title: '序号', type:'numbers', fixed: 'left'}
                                    ,{field: 'id', title: 'ID',  sort: true, hide: 'hide'}
                                    ,{field: 'ContainerCode', title: '储位编码',  sort: true, fixed: 'left'}
                                    ,{field: 'device', title: '设备',  sort: true, fixed: 'left'}
                                    ,{field: 'inventoryNum', title: '库存数量',  sort: true, fixed: 'left'}
                                    // ,{field: 'row', title: '行号',  sort: true, fixed: 'left'}
                                    // ,{field: 'arrange', title: '列号',  sort: true, fixed: 'left'}
                                    ,{field: 'usageRate', title: '使用率',  sort: true, fixed: 'left'}
                                    // ,{field: 'num', title: '数量',  sort: true, edit: 'text'}
                                ]
                            ]
                        });
                        layero.addClass('layui-form');
                        // 将保存按钮改变成提交按钮
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'testttt',
                            'lay-submit': ''
                        });
                        form.render();
                    },
                    yes:function(index,layero){
                        form.on('submit(testttt)',function(data){
                        })
                        layer.close(layerIndex);
                        return false;
                    },
                });
            }
            else if (layEvent === 'del'){
                let index = idsAll.indexOf(ids);
                idsAll.splice(index, 1);
                table.reload('putList', {
                    url: '/storage/getGoodsList1'
                    ,where: {
                        id:idsAll.toString(),
                    } //设定异步数据接口的额外参数
                });
            }
        });
        util.event('lay-active', {
            reload: function (res) {
                location.reload();
            },
            AllData: function () {
                let toolName = $("#toolName").val();
                let model = $("#model").val();
                let location = $("#location").val();
                let userName = $("#userName").val();
                let status = $("#status").val();
                if (toolName == '' && model == '' && location == '' && userName == '' && status == '') {
                    layer.msg("当前无筛选条件")
                } else {
                    table.reload('outboundList', {
                        url: '/storage/SearchtoolReceiveLogList'
                        , where: {
                            toolName: toolName,
                            model: model,
                            location: location,
                            userName: userName,
                            status: status,
                        } //设定异步数据接口的额外参数
                    });
                }

            },
        })

    })
</script>
</body>
</html>
